<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .wrap {
        width: 1072px;
        height: 400px;
        margin: 50px auto;
      }

      .wrap img {
        float: left;
        border: 1px solid black;
        margin-right: 20px;
      }

      .top {
        float: left;
        width: 600px;
        height: 220px;
        border-bottom: 1px solid #bbb;
        font-family: "Microsoft yahei";
      }

      .top p span {
        font-size: 14px;
        color: 0.666;
        border: 1px solid #999;
        display: inline-block;
        padding: 8px;
        cursor: pointer;
      }

      .top p span.on {
        border: 2px solid #f60;
        padding: 7px;
        background: url(images/on.png) no-repeat right bottom;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <img src="images/black.jpg" alt="" />
      <div class="top">
        <p class="color">
          <label class="">颜色</label>
          <span class="on">黑色</span>
          <span class="">白色</span>
          <span class="">红色</span>
          <span class="">黄色</span>
          <span class="">紫色</span>
          <span class="">绿色</span>
        </p>
        <p class="rom">
          <label class="">内存</label>
          <span class="on">64GB</span>
          <span class="">128GB</span>
          <span class="">256GB</span>
        </p>
        <p class="banben">
          <label>版本</label>
          <span class="on">全网通</span>
          <span>移动版</span>
          <span>联通版</span>
          <span>电信版</span>
        </p>
      </div>
    </div>

    <script>
      const imgArr = [
        "images/black.jpg",
        "images/white.jpg",
        "images/red.jpg",
        "images/yellow.jpg",
        "images/purple.jpg",
        "images/green.jpg",
      ]
      const spans = document.querySelectorAll(".color span")
      for (let i = 0; i < spans.length; i++) {
        const colors = spans[i]
        colors.addEventListener("click", () => {
          const ons = document.querySelector(".on")
          const imgs = document.querySelector("img")
          ons.classList.remove("on")
          colors.classList.add("on")
          imgs.src = imgArr[i]
        })
      }
      const roms = document.querySelectorAll(".rom span")
      for (let j = 0; j < roms.length; j++) {
        const roms1 = roms[j]
        roms1.addEventListener("click", () => {
          const ons1 = document.querySelector(".rom .on")
          ons1.classList.remove("on")
          roms1.classList.add("on")
        })
      }
      const banben = document.querySelectorAll(".banben span")
      for (let k = 0; k < banben.length; k++) {
        const banbens = banben[k]
        banbens.addEventListener("click", () => {
          const ons2 = document.querySelector(".banben .on")
          ons2.classList.remove("on")
          banbens.classList.add("on")
        })
      }
    </script>
  </body>
</html>
